
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-uploading"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-uploading</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianping"></i>
                    <div class="name">天平</div>
                    <div class="fontclass">.icon-tianping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-51"></i>
                    <div class="name">创建 </div>
                    <div class="fontclass">.icon-51</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quxiao2"></i>
                    <div class="name">取消</div>
                    <div class="fontclass">.icon-quxiao2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuowu"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-cuowu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jujue21"></i>
                    <div class="name">拒绝-21</div>
                    <div class="fontclass">.icon-jujue21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon2"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-houtai"></i>
                    <div class="name">后台</div>
                    <div class="fontclass">.icon-houtai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-moban"></i>
                    <div class="name">模板</div>
                    <div class="fontclass">.icon-moban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian1"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanxiang"></i>
                    <div class="name">选项</div>
                    <div class="fontclass">.icon-xuanxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangchuan"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-module-link"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-module-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-excel"></i>
                    <div class="name">excel</div>
                    <div class="fontclass">.icon-excel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingtai"></i>
                    <div class="name">平台</div>
                    <div class="fontclass">.icon-pingtai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu1"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loginout"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-loginout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-queding"></i>
                    <div class="name">确定</div>
                    <div class="fontclass">.icon-queding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-download-copy"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-download-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangbei"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-jiangbei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoge"></i>
                    <div class="name">表格</div>
                    <div class="fontclass">.icon-biaoge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingguzhongxin"></i>
                    <div class="name">评估中心</div>
                    <div class="fontclass">.icon-pingguzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next"></i>
                    <div class="name">下一页</div>
                    <div class="fontclass">.icon-next</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongjifenxi-copy"></i>
                    <div class="name">统计分析</div>
                    <div class="fontclass">.icon-tongjifenxi-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifeiji"></i>
                    <div class="name">纸飞机</div>
                    <div class="fontclass">.icon-zhifeiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaxun"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.icon-chaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pdf"></i>
                    <div class="name">pdf</div>
                    <div class="fontclass">.icon-pdf</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-jiahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianhao"></i>
                    <div class="name">减号</div>
                    <div class="fontclass">.icon-jianhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-2"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-32"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-32</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pageprev"></i>
                    <div class="name">上一页</div>
                    <div class="fontclass">.icon-pageprev</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontwo"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.icon-iconfontwo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anquan01"></i>
                    <div class="name">安全</div>
                    <div class="fontclass">.icon-anquan01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanxiang1"></i>
                    <div class="name">选项</div>
                    <div class="fontclass">.icon-xuanxiang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhankai"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-zhankai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanli"></i>
                    <div class="name">管理</div>
                    <div class="fontclass">.icon-guanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quxiao"></i>
                    <div class="name">取消</div>
                    <div class="fontclass">.icon-quxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian"></i>
                    <div class="name">jian</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zidian"></i>
                    <div class="name">字典</div>
                    <div class="fontclass">.icon-zidian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suyaniconchanpinleibufenzuodaohangbufen87-copy"></i>
                    <div class="name">部门管理</div>
                    <div class="fontclass">.icon-suyaniconchanpinleibufenzuodaohangbufen87-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next1"></i>
                    <div class="name">上一页</div>
                    <div class="fontclass">.icon-next1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenpi42x36"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.icon-shenpi42x36</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caidan"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-caidan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingtai1"></i>
                    <div class="name">平台</div>
                    <div class="fontclass">.icon-pingtai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijiao"></i>
                    <div class="name">提交</div>
                    <div class="fontclass">.icon-tijiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caretleft"></i>
                    <div class="name">左</div>
                    <div class="fontclass">.icon-caretleft</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caretright"></i>
                    <div class="name">右</div>
                    <div class="fontclass">.icon-caretright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-geren"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.icon-geren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanxiang2"></i>
                    <div class="name">选项</div>
                    <div class="fontclass">.icon-xuanxiang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baocun"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-baocun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">用户管理</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faqishenqing"></i>
                    <div class="name">发起申请</div>
                    <div class="fontclass">.icon-faqishenqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugai"></i>
                    <div class="name">修改</div>
                    <div class="fontclass">.icon-xiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishenhe"></i>
                    <div class="name">待审核</div>
                    <div class="fontclass">.icon-daishenhe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daiban"></i>
                    <div class="name">待办</div>
                    <div class="fontclass">.icon-daiban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhizuobiaozhun41"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-iconfontzhizuobiaozhun41</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingshi"></i>
                    <div class="name">警示</div>
                    <div class="fontclass">.icon-jingshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-piliangcaozuo1"></i>
                    <div class="name">批量操作</div>
                    <div class="fontclass">.icon-piliangcaozuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shang"></i>
                    <div class="name">上</div>
                    <div class="fontclass">.icon-shang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xia"></i>
                    <div class="name">下</div>
                    <div class="fontclass">.icon-xia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongguo2"></i>
                    <div class="name">通过</div>
                    <div class="fontclass">.icon-tongguo2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinggu"></i>
                    <div class="name">评估</div>
                    <div class="fontclass">.icon-pinggu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo2"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo1"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shishijiankong-"></i>
                    <div class="name">实时监控-2</div>
                    <div class="fontclass">.icon-shishijiankong-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuihui"></i>
                    <div class="name">退回</div>
                    <div class="fontclass">.icon-tuihui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui1"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishenpi"></i>
                    <div class="name">待审批</div>
                    <div class="fontclass">.icon-daishenpi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoseguanli"></i>
                    <div class="name">角色管理</div>
                    <div class="fontclass">.icon-jiaoseguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjuantiaocha"></i>
                    <div class="name">问卷调查</div>
                    <div class="fontclass">.icon-wenjuantiaocha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next2"></i>
                    <div class="name">下一页</div>
                    <div class="fontclass">.icon-next2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuwu"></i>
                    <div class="name">服务</div>
                    <div class="fontclass">.icon-fuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lingdang"></i>
                    <div class="name">铃铛</div>
                    <div class="fontclass">.icon-lingdang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhitonggao"></i>
                    <div class="name">通知通告</div>
                    <div class="fontclass">.icon-tongzhitonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodefuwu"></i>
                    <div class="name">我的服务</div>
                    <div class="fontclass">.icon-wodefuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-houtaiguanli"></i>
                    <div class="name">后台管理</div>
                    <div class="fontclass">.icon-houtaiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gangweiquanxian"></i>
                    <div class="name">岗位权限</div>
                    <div class="fontclass">.icon-gangweiquanxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yingxiaopinggu"></i>
                    <div class="name">营销评估</div>
                    <div class="fontclass">.icon-yingxiaopinggu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danju"></i>
                    <div class="name">单据</div>
                    <div class="fontclass">.icon-danju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export_infor"></i>
                    <div class="name">导出用户信息</div>
                    <div class="fontclass">.icon-export_infor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baocun2"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-baocun2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-doc"></i>
                    <div class="name">doc</div>
                    <div class="fontclass">.icon-doc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feiyong"></i>
                    <div class="name">费用</div>
                    <div class="fontclass">.icon-feiyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongsi"></i>
                    <div class="name">公司</div>
                    <div class="fontclass">.icon-gongsi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caidan1"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-caidan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ShowRoom-iconliaotianchangyongyu"></i>
                    <div class="name">Show Room-icon聊天常用语</div>
                    <div class="fontclass">.icon-ShowRoom-iconliaotianchangyongyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuwuxiaoxi_shenqingzhong"></i>
                    <div class="name">服务消息_申请中</div>
                    <div class="fontclass">.icon-fuwuxiaoxi_shenqingzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijiao1"></i>
                    <div class="name">提交</div>
                    <div class="fontclass">.icon-tijiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liulanqi-xiangmu"></i>
                    <div class="name">浏览器-项目</div>
                    <div class="fontclass">.icon-liulanqi-xiangmu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fengxianpinggu"></i>
                    <div class="name">风险评估</div>
                    <div class="fontclass">.icon-fengxianpinggu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao2"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-jiahao2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui4"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti-"></i>
                    <div class="name">向下的箭头</div>
                    <div class="fontclass">.icon-weibiaoti-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishenhe2"></i>
                    <div class="name">待审核</div>
                    <div class="fontclass">.icon-daishenhe2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangyou"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.icon-xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuo"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.icon-xiangzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuan1"></i>
                    <div class="name">圆</div>
                    <div class="fontclass">.icon-yuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gou"></i>
                    <div class="name">勾</div>
                    <div class="fontclass">.icon-gou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuan"></i>
                    <div class="name">圆1</div>
                    <div class="fontclass">.icon-yuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gou1"></i>
                    <div class="name">勾1</div>
                    <div class="fontclass">.icon-gou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxiadejiantou"></i>
                    <div class="name">向下的箭头 8个点</div>
                    <div class="fontclass">.icon-xiangxiadejiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxiadejiantou-"></i>
                    <div class="name">向下的箭头-10个点</div>
                    <div class="fontclass">.icon-xiangxiadejiantou-</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
